
@set std-toggler {
  :root { 
    flow: stack;
    behavior:check; 
    background:window;
    overflow:hidden;
    width:max-content;
    height:min-content;
    padding:0dip;
    border:1px solid threedshadow;
    border-radius:0.8em;
    transition: none;
    
    /*foreground-image:url(toggler-knob.svg);
    foreground-size: calc(1.6em + 2px);
    foreground-repeat:no-repeat;
    foreground-position:100% 50%;
    foreground-clip:border-box; */
    
    cursor:pointer;
  }

  :root:checked { foreground-position:0% 50%;  }
  
  :root > caption { line-height:1.4em; padding:0 0.6em; height:1.6em }
  
  :root > caption.true { padding-right:2em; background-color:highlight; color: highlighttext; }
  :root > caption.false { padding-left:2em; background-color:threedface; }
  
  :root:checked > caption.false { transform: translate(100%,0);  }
  :root:not(:checked) > caption.true  { transform: translate(-100%,0); }
  
  /*do transitions only after behavior assignment - when it is UI operational */
  :root:ready { transition: foreground-position(linear,200ms);  }
  :root:ready > caption { transition: transform(linear,200ms); }
  
  :root::after /* the knob */
  { 
    display:block; 
    size:1.6em; 
    margin: 1* 1* 1* 0*; 
    background-image:url(stock:disk);
    background-size:1.1em;
    background-position:50% 50%;
    background-repeat:no-repeat;
    stroke:threedshadow; stroke-width: 1dip;
    fill:#fff;
  } 
  :root:checked::after { margin: 1* 0* 1* 1*; transition: margin(linear,200ms);  } 
  
}

button[type=toggler] { 
  style-set: "std-toggler";
}

